import React, { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Button, Result } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';
import { updateOrderStatus } from '../../utils/storage';
import { calculateOrderPoints } from '../../utils/points';
import './PaymentSuccess.css';

const PaymentSuccess = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  const { orderId, orderNo, amount } = location.state || {};
  // 预计获得的积分数
  const estimatedPoints = amount ? calculateOrderPoints(amount) : 0;

  useEffect(() => {
    // 确保订单状态已更新为已支付
    if (orderId) {
      updateOrderStatus(orderId, 'paid');
    }
  }, [orderId]);

  const handleViewOrder = () => {
    if (orderId) {
      navigate(`/app/order/${orderId}`);
    } else {
      navigate('/app/orders');
    }
  };

  const handleContinueShopping = () => {
    navigate('/app');
  };

  return (
    <div className="payment-success">
      <Result
        icon={<CheckCircleOutlined style={{ color: '#52c41a', fontSize: '72px' }} />}
        title="支付成功"
        subTitle={
          <div className="success-info">
            {orderNo && <div>订单号：{orderNo}</div>}
            {amount && <div>支付金额：¥{amount.toFixed(2)}</div>}
            {estimatedPoints > 0 && (
              <div style={{ color: '#ff6b35', marginTop: '4px' }}>
                确认收货后可获得 {estimatedPoints} 积分奖励
              </div>
            )}
            <div style={{ marginTop: '8px', color: '#666' }}>
              您的订单已提交成功，我们会尽快为您发货
            </div>
          </div>
        }
        extra={[
          <Button 
            key="order" 
            onClick={handleViewOrder}
            style={{ marginRight: '12px' }}
          >
            查看订单
          </Button>,
          <Button 
            key="continue" 
            type="primary" 
            onClick={handleContinueShopping}
          >
            继续购物
          </Button>
        ]}
      />
      
      <div className="success-tips">
        <div className="tip-item">
          <span className="tip-icon">📦</span>
          <span>商品将在1-3个工作日内发货</span>
        </div>
        <div className="tip-item">
          <span className="tip-icon">🚚</span>
          <span>您可以在"我的订单"中查看物流信息</span>
        </div>
        <div className="tip-item">
          <span className="tip-icon">💎</span>
          <span>确认收货后将获得积分奖励（¥500=1积分）</span>
        </div>
        <div className="tip-item">
          <span className="tip-icon">⚠️</span>
          <span>确认收货后将自动减少相应库存，请留意商品库存状态</span>
        </div>
      </div>
    </div>
  );
};

export default PaymentSuccess; 